@charset "utf-8";
@import "reset";
@function r($px){
	@return $px/100px*1rem;
}
.web{
		width: r(640px);
		padding-top: r(89px);
		padding-bottom: r(96px);
		background-color: #f5f5f5;
		header{
			width: r(640px);
			height: r(89px);
			background-color: #B20000;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: white;
			padding: 0 r(17px);
			position: fixed;
			top: 0;
			img{
				width: r(264px);
			}
		}
		.swiper{
			width:r(640px);
			height: r(357px);
			position: relative;
			.swiper-Img{
				width:r(640px);
				height: r(357px);
				img{
					width: 100%;
					height: 100%;
				}
			}
			.swiper-Text{
				width: r(640px);
				height: r(106px);
				position: absolute;
				bottom: 0;
				background-color: #1F1F1F;
				opacity: 0.5;
				p:first-child{
					margin: 0 r(29px);
					font-size: r(25px);
					color: white;
					margin-top: r(19px);
				}
				p:nth-of-type(2){
					margin: 0 r(29px);
					font-size: r(15px);
					color: white;
					margin-top: r(10px);
				}
			}
		}
		.content{
			width: r(640px);
			height: r(629px);
			background-color: white;
			margin: r(25px) 0;
			.first{	
				//width: r(246px);
				margin: 0 r(29px);
				display: flex;
				justify-content: space-between;
				.left{
					display: flex;
					//width: r(246px);
					margin-top: r(15px);
					img{
						width:r(80px);
						height: r(80px);
						border-radius: 50%;
					}
					.Text{
						margin-left: r(20px);
						p:first-child{
							font-size: r(30px);
							color: #C5C5C5;
						}
						p:nth-of-type(2){
							margin-top: r(10px);
							font-size: r(20px);
							color: #C5C5C5;
						}
					}
				}
				.right{
					display: flex;
					justify-content: center;
					margin-top: r(15px);
					width: r(230px);
					height: r(60px);
					background-color: #B20000;
					
					p:first-child{
						font-size: r(30px);
						color: white;
						text-align: center;
						line-height: r(60px);
						font-weight: bold;
						//background-color: #000000;
					}
					div{
							width: r(30px);
							height: r(30px);
							margin-top: r(18px);
							background-color: white;
							border-radius: 50%;					
					}
					p:nth-of-type(2){
						font-size: r(30px);
						text-align: center;
						line-height: r(60px);
						margin-left: r(-25px);
						color: #B20000;
						font-weight: bolder;
					}
				}
			}
			.second{
				margin: 0 r(29px);
				margin-top: r(15px);
				display: flex;
				justify-content: space-between;
				align-items: baseline;
				border-bottom: 1px solid #C5C5C5;
				padding-bottom: r(10px);
				p:first-child{
					font-size: r(30px);
				}
				p:nth-of-type(2){
					font-size: r(20px);
				}
			}
			.third{
				margin: 0 r(29px);
				margin-top: r(15px);
				width: r(585px);
				height: r(430px);
				img{
					width: 100%;
					height: 100%;
				}
			}
		}
		.footer_Nav{
				width:r(640px);
				height: r(96px);
				background-color: #f5f5f5;
				position: fixed;
				bottom:0;
				display: flex;
				justify-content: space-around;
				font-size: 0;
				div{
					height: 100%;
					//width: 20%;
					margin-top: r(10px);
					font-size: r(20px);
					//align-items: center;
					text-align: center;
					display: block;
					color: #8b8b8b;
					p{
						text-align: center;
						i{
							font-size: r(55px);
						}
					}	
				}
				div:nth-of-type(3){
					color: red;
				}
			}
	.search{
					width: 100%;
					height: 100%;
					background-color: #f1f1f1;
					transform: translateY(100%);
					position: fixed;
					top:0;
					left:0;
					.hotword{
						p{
							font-size: r(40px);
							margin: r(24px) r(34px);
						}
					}		
					.one{
						color:#fefcfd;
						height: r(100px);
						background-color: #1f1f1f;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 r(17px);
						font-size: r(31px);
						.search_box{
							width: r(500px);
							position: relative;
							.search_icon{
								padding-left: r(10px);
								position: absolute;
								top:r(10px);
							}
							.search_1{
								input[type="search"]{
									width: r(500px);
									height: r(58px);
									border-radius: 10px;
									border:solid #fefcfd 0.5px;
									padding-left: r(60px);
									padding-right: r(20px);
									background-color:#1f1f1f ;
									color: white;
							}
						}		
					}
				}
			    .search_world{
			    	margin-left: r(34px);
			    	margin-right: 40px;
					
			    	.line{
			    		display: flex;
			    		justify-content: space-between;
						padding: r(10px) 0;
			    		p{
			    			font-size: r(30px);
							//border: 1px solid black;
							background-color: white;
							padding: r(10px);
			    		}
			    	}
			    }
			}
	.list{
					width:100%;
					height: 100%;
					background-color: #303030;
					transform: translateX(-100%);
					position: fixed;
					top:0;
					overflow: scroll;
					.list_header{
						color:#fefcfd;
						height: r(100px);
						background-color: #21201c;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 r(17px);
						font-size: r(31px);
						.colse{}
						.search_header{
							position: relative;
							.sousuo{
								position: absolute;
								top: r(10px);
								margin-left: 6px;
							}
							.search_input{
								
								input[type="search"]{
									width: r(500px);
									height: r(58px);
									border-radius: 10px;
									border:solid #fefcfd 0.5px;
									padding-left: r(60px);
									padding-right: r(20px);
									background-color:#1f1f1f ;
									color: white;
								}
							}
						}
					}
					hr{
						margin: 0 10px;
						border: 0.5px solid #524e4d;
					}
					.login{
						background-color: #222222;
						height: r(450px);
						position: relative;
						padding-top: r(100px);
						.login_img{
							width: r(180px);
							height: r(180px);
							border-radius: 50%;
							margin: 0 auto;
							// position: absolute;
							// top: r(100px);
							img{
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}
						.login_A{
							    width: 50%;
								margin: 0 auto;
								font-size: r(50px);
								p{
									color: white;
									text-align: center;
									a{
										font-size: r(30px);
										color: #505050;
									}
								}
						}
					}
					.operate{
						background-color: #222222;
						margin-top: r(15px);
						//height: 300px;
						.first{		
							color: white;
							font-size: r(30px);
							padding: r(20px);
							label{
								display: flex;
								justify-content: space-between;
							}		
						}	
						input{
							display: contents;
						}
						input:checked + div{
							max-height: r(200px);
							transition: all 1s;
						}
						.second{
							max-height: 0;
							overflow: hidden;
							color: white;
							font-size: r(30px);
							text-align: center;
							//padding: r(20px) 0;
							p{
								padding: r(20px) 0;
							}
						}
					}
				}
}